<template>
  <div class="PreferentialRelief  h100" v-loading="loading">
    <div class="PageContent">
      <el-form :model="ruleForm" :inline="true" ref="ruleForm" label-width="80px" class="PageItem margintop20">
        <el-row :gutter="5" class="fileSearch">
          <el-form-item label="联系人:">
            <el-input v-model="ruleForm.familyName"></el-input>
          </el-form-item>
          <el-form-item label="寄存逝者:">
            <el-input v-model="ruleForm.deadName"></el-input>
          </el-form-item>
          <el-form-item label="寄存位置:">
            <el-input v-model="ruleForm.positionName"></el-input>
          </el-form-item>
          <!--          <el-form-item label="寄存厅:" prop="name">-->
          <!--            <el-select v-model="ruleForm.benefitDistrictCode" placeholder="请选择">-->
          <!--              <el-option label="全部" value="-1"></el-option>-->
          <!--              <el-option-->
          <!--                v-for="item in dictionary.huimin_region"-->
          <!--                :key="item.dataCode"-->
          <!--                :label="item.dataText"-->
          <!--                :value="item.dataCode"/>-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->
          <el-form-item label="寄存时间:" prop="name" label-width="120px">
            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.beginTime"
                            format="yyyy-MM-dd"></el-date-picker>
            -
            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.endTime"
                            format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <div class="checkbox-wrap">
              <el-checkbox v-model="depositchecked">包含已取走骨灰</el-checkbox>
            </div>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" v-if="btnRight.btnPreferentialReliefSearch" @click="onSubmit('search')">查询
            </el-button>
            <el-button type="primary" plain v-if="btnRight.btnPreferentialReliefExport" @click="openExecl">导出Excel
            </el-button>
          </el-form-item>
        </el-row>
        <!-- <el-row :gutter="5" class="fileSearch">
        </el-row> -->
        <el-table
          :data="tableData"
          :header-cell-style="{background:'rgb(246,247,251)',color:'#606266'}"
          stripe
          border
          :height="tableHeight">
          <el-table-column align='center' prop="businessCode" label="业务编码" width="150">
          </el-table-column>
          <el-table-column
            prop="deadName"
            align='center'
            label="逝者姓名"
            width="100">
          </el-table-column>
          <el-table-column
            prop="deadGender"
            align='center'
            label="逝者性别"
            width="100">
          </el-table-column>
          <el-table-column
            prop="deadAge"
            align='center'
            label="逝者年龄"
            width="80">
          </el-table-column>
          <el-table-column
            prop="positionName"
            align='center'
            label="寄存位置"
            width="200">
          </el-table-column>
          <el-table-column
            prop="depositState"
            align='center'
            label="寄存状态"
            width="100">
          </el-table-column>
          <el-table-column
            prop="deadStorageTime"
            align='center'
            label="购买时间"
            width="100">
          </el-table-column>
          <el-table-column
            prop="endDate"
            align='center'
            label="到期时间"
            width="120">
          </el-table-column>
          <el-table-column
            prop="PosTotalDate"
            align='center'
            label="寄存总年数"
            width="100">
          </el-table-column>
          <el-table-column
            prop="familyName"
            align='center'
            label="联系人"
            width="100">
          </el-table-column>
          <el-table-column
            prop="familyPhone"
            align='center'
            label="联系电话"
            width="140">
          </el-table-column>
          <el-table-column
            prop="familyCertificateNo"
            align='center'
            label="联系人身份证号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="itemCharge"
            align='center'
            label="费用">
          </el-table-column>
        </el-table>
        <p style="text-align: right;margin-top: 20px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pager.currentPage"
            :page-size="pager.pageSize"
            background
            layout="total, prev, pager, next, jumper"
            :total="pager.total">
          </el-pagination>
        </p>
      </el-form>
    </div>
  </div>
</template>

<script>
  import * as Type from '@/api/service'
  import {dataFormatetmd} from '@/utils/index'
  import download from "@/api/download"

  export default {
    name: "Inquiryofbasic",
    data() {
      return {
        loading: false,
        type: [],
        ruleForm: {
          "businessCode": "",
          "deadName": "",
          "familyName": "",
          "positionName": "",
          "beginTime": "",
          "endTime": "",
        },
        pager: {
          "pageSize": 20,
          "total": 0,
          "currentPage": 1
        },
        tableHeight: 0,
        tableData: [],
        dictionary: {},
        //按钮权限
        btnRight: {
          btnPreferentialReliefSearch: true, //查询
          btnPreferentialReliefExport: true,//导出excel
        },
        depositchecked:false,
      }

    },
    mounted() {
      //按钮权限
      // this.btnRight = this.$route.meta.buttons;
      //遍历属性赋值将true与false字符串转换成布尔型的值
      // for (var key of Object.keys(this.btnRight)) {
      //   this.btnRight[key]=(this.btnRight[key]|| this.btnRight[key]=="true")?true:false;
      // }
      this.$store.dispatch('user/getdictionary').then((res) => {     //获取字典数据
        this.dictionary = res;
        this.$set(this.dictionary, res)
      }).catch(() => console.log('promise catch err'))
      this.onSubmit()
      var that = this

      window.onresize = function () {
        var search = document.getElementsByClassName("fileSearch")[0].offsetHeight
        var dom = document.getElementsByClassName("PageContent")[0].offsetHeight
        that.tableHeight = dom - search - 110
      }
    },
    //注销window.onresize事件
    destroyed() {
      window.onresize = null;
    },
    updated() {
      this.$nextTick(() => {
        var dom = document.getElementsByClassName("PageContent")[0].offsetHeight
        var search = document.getElementsByClassName("fileSearch")[0].offsetHeight
        this.tableHeight = dom - search - 110
      })
    },
    methods: {
      onSubmit(value) {
        this.loading = true
        if (value) {
          this.pager.currentPage = 1;
        }
        var postData = {
          // "businessCode": '',
          "deadName": this.ruleForm.deadName,
          "familyName": this.ruleForm.familyName,
          "positionName": this.ruleForm.positionName,
          "pageSize": this.pager.pageSize,
          "currentPage": this.pager.currentPage,
        }
        if(this.depositchecked){
          postData.depositStateCode = 2;
        }
        if (this.ruleForm.beginTime != '') {
          postData.beginTime = dataFormatetmd(new Date(this.ruleForm.beginTime))
        }
        if (this.ruleForm.endTime != '') {
          postData.endTime = dataFormatetmd(new Date(this.ruleForm.endTime))
        }
        //查询接口
        Type['loadDepositList'](postData).then(response => {
          const {data} = response;
          if (!data) {
            this.loading = false;
            this.$message('数据读取失败')
            return
          }

          console.log(data)
          this.tableData = data.list
          this.pager = data.pager
          this.loading = false
          //   //数据读取成功
        }).catch(error => {
          this.$message(error)
          this.loading = false
          this.tableData = []
        })
      },
      // 初始页currentPage、初始每页数据数pagesize和数据data
      handleSizeChange: function (size) {
        this.pager.pagesize = size;
        alert(pagesize)  //每页下拉显示数据
      },
      handleCurrentChange: function (currentPage) {
        this.pager.currentPage = currentPage;
        this.onSubmit()  //点击第几页
      },
      openExecl() {
        // window.location.href = "excel地址"
        var postData = {
          // "deadName": this.ruleForm.deadName,
          // "familyName": this.ruleForm.familyName,
          // "positionName": this.ruleForm.positionName,
          // "pageSize": this.pager.pageSize,
          // "currentPage": this.pager.currentPage,
          // "exportExcelFlag": 1,            //0表示显示 1表示导出execl
        }

        download.exportExcel(Type["loadDepositListEXPEXC"], postData, "寄存基本信息" + download.getDateTime() + ".xlsx");
      },
    }
  }
</script>

<style scoped>
  .checkbox-wrap{
    width: 100px;
    display: flex;
    height: 40px;
    line-height: 40px;
    align-items: center;
  }
</style>
